<template>
  <div class="sjpz">
    <el-card>
      <div slot="header" class="card-header">
        <span>{{ this.$route.meta.title }}</span>
        <el-select v-model="valC">
          <el-option label="业务数据" value="1"> </el-option>
          <el-option label="审计源数据" value="2"> </el-option>
          <el-option label="审计结论" value="3"> </el-option>
          <el-option label="审计报告" value="4"> </el-option>
        </el-select>
      </div>
      <el-form
        label-width="100px"
        label-position="right"
        :model="formData"
        :inline="true"
      >
        <el-form-item label="业务种类">
          <el-select v-model="formData.selectA">
            <el-option label="新5G业务" value="1"> </el-option>
            <el-option label="集团业务" value="2"> </el-option>
            <el-option label="VIP用户业务" value="3"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据类型">
          <el-select v-model="formData.selectB">
            <el-option label="EXCEL数据" value="1"> </el-option>
            <el-option label="TXT数据" value="2"> </el-option>
            <el-option label="PDF数据" value="3"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-select v-model="formData.selectC">
            <el-option label="三个月内" value="1"> </el-option>
            <el-option label="半年内" value="2"> </el-option>
            <el-option label="一年内" value="3"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域范围">
          <el-select v-model="valA" placeholder="所属省份">
            <el-option
              v-for="item in sf"
              :key="item.ProID"
              :label="item.name"
              :value="item.ProID"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-card class="el-card-clean">
        <div class="search">
          <el-input placeholder="请输入要查询的内容" v-model="val"></el-input>
          <el-button
            type="primary"
            style="marginleft: 20px"
            @click="
              dialog = true
              handleSearch()
            "
            >查询</el-button
          >
        </div>
      </el-card>
    </el-card>

    <el-dialog
      close="dialog"
      title="查询结果"
      :visible.sync="dialog"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <el-form v-model="formDataB" class="form" label-width="100px">
          <el-form-item label="集团名称">
            <el-input v-model="formDataB.valA" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户类型">
            <el-input v-model="formDataB.valB" disabled></el-input>
          </el-form-item>
          <el-form-item label="套餐">
            <el-input v-model="formDataB.valC" disabled></el-input>
          </el-form-item>
          <el-form-item label="入网时间">
            <el-input v-model="formDataB.valD" disabled></el-input>
          </el-form-item>
          <el-form-item label="所属地区">
            <el-input v-model="formDataB.valE" disabled></el-input>
          </el-form-item>
          <el-form-item label="是否优惠">
            <el-input v-model="formDataB.valF" disabled></el-input>
          </el-form-item>
          <el-form-item label="包含业务">
            <el-tag type="success" style="marginright: 10px">集团短号</el-tag>
            <el-tag type="success" style="marginright: 10px">集团彩铃</el-tag>
            <el-tag type="success" style="marginright: 10px"
              >PBX移动通话</el-tag
            >
            <el-tag type="success" style="marginright: 10px">楼宇专线</el-tag>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialog = false"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import sf from '@/utils/sf'
export default {
  data() {
    return {
      sf,
      val: '',
      valC: '1',
      dialog: false,
      formData: {
        selectA: '1',
        selectB: '1',
        selectC: '1'
      },
      formDataB: {
        valA: '九鼎实业集团',
        valB: '集团业务',
        valC: '动力套餐A',
        valD: '2019年',
        valE: '北京',
        valF: '是',
        valG: '1'
      },
      valA: '',
      valB: ''
    }
  },

  methods: {
    handleSearch() {
      this.formDataB.valA = this.val
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: center;
  align-items: center;
  .el-input {
    width: 300px;
  }
}

/deep/.el-dialog__body {
  height: 62vh;
}

.form {
  .el-input {
    width: 500px;
  }
}
</style>
